<template>
  <nav>
    <ul>
      <li>
        <router-link to="/" active-class="active">
          <div class="icon">
            <span class="iconfont icon-fangzi"></span>
            <p>首页</p>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/menu" active-class="active">
          <div class="icon">
            <span class="iconfont icon-shipinyinliao"></span>
            <p>菜单</p>
          </div>
        </router-link>
      </li>
      <li>
        <router-link to="/order" active-class="active">
          <div class="icon">
            <span class="iconfont icon-caidanguanli"></span>
            <p>订单</p>
          </div>
        </router-link>
      </li>

      <li>
        <router-link to="/shopCar" active-class="active">
          <div class="icon">
            <span class="iconfont icon-gouwuchefill"></span>
            <p>购物车</p>
          </div>
        </router-link>
      </li>

      <li>
        <router-link to="/my" active-class="active">
          <div class="icon">
            <span class="iconfont icon-my"></span>
            <p>我的</p>
          </div>
        </router-link>
      </li>
    </ul>
  </nav>
  <router-view />
</template>

<style lang="scss">
@import url(./static/style/reset.css);
@import "./static/style/variable.scss";

nav {
  height: 3rem;
  width: 100%;
  background-color: #f8f8f8;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  border-top: 1.5px solid #fff;

  ul {
    display: flex;
    height: 99%;

    li {
      margin-top: 0.2667rem;
      flex: 15%;
      height: 90%;

      a {
        color: #686767;

        &.active {
          color: $backGroundColor;
        }

        .icon {
          display: flex;
          height: 100%;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;

          span {
            font-size: 22px;
          }

          p {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
<script lang="ts" setup>
import { provide, ref, nextTick, onUnmounted, onBeforeMount } from "vue";
import router from "./router";
const isRouterAlive = ref(true);
const reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true
  })
}
provide("reload", reload);



onBeforeMount(() => {
  router.push({
    path: "/",
  });
})


onUnmounted(() => {
  sessionStorage.clear();
})

</script>